<template>
  <div class="tab-select">
    <div class="hotFilters">
      <template v-for="(item, index) in hotFilters" key="index">
        <!-- 优惠 -->
        <div class="discount" v-if="item.gType === 0">
          <div class="discount-content">
            <van-dropdown-menu>
              <van-dropdown-item v-model="value" title="优惠" :ref="dropdownItemRefs">
                <div class="item0">
                  <template v-for="(item, index) in subFilterItems" :key="index">
                    <div
                      class="title0"
                      :class="{ active: title0 === index }"
                      @click="item0Click(index)"
                    >
                      {{ item.label }}
                    </div>
                  </template>
                </div>
                <viewHouseBtns
                  @clear="handleClearClick(item.label)"
                  @house="handleHouseClick(item.label)"
                ></viewHouseBtns>
              </van-dropdown-item>
            </van-dropdown-menu>
          </div>
        </div>
        <!-- 多人... -->
        <div class="item" v-if="item.gType === 1">
          <div class="title1" :class="{ active: title1 === index }" @click="item1Click(index)">
            {{ item.label }}
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import viewHouseBtns from '@/components/view-house-btns/view-house-btns.vue'

  const props = defineProps({
    hotFilters: {
      type: Array,
      default: () => []
    }
  })
  const value = ref(0)

  const subFilterItems = computed(() => {
    return props.hotFilters[0].subFilterItems
  })

  const title0 = ref()
  const item0Click = (index) => {
    title0.value = index
  }
  const title1 = ref()
  const item1Click = (index) => {
    title1.value = index
  }

  const dropdownRefs = {}

  const dropdownItemRefs = (el) => {
    if (el) {
      dropdownRefs[el.title] = el
    }
  }
  const handleClearClick = (title) => {
    dropdownRefs[title]?.toggle()
  }
  const handleHouseClick = (title) => {
    dropdownRefs[title]?.toggle()
  }
</script>

<style lang="less" scoped>
  .hotFilters {
    display: flex;
    height: 39px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 12px 0 5px 20px;
    background-color: #f7f8fb;
    margin-top: -1px;
    .item {
      text-align: center;
      margin-left: 15px;

      .title1 {
        font-size: 12px;
        background-color: #fff;
        padding: 5px 15px 5px 15px;
        border-radius: 13px;
        color: #666666;
      }
    }
  }
  .item0 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    .title0 {
      font-size: 12px;
      padding: 3px 10px 3px 10px;
      border-radius: 13px;
      color: #666666;
      margin: 5px 16px;
      border: #666666 solid 1px;
    }
  }
  :global(.tab-select .van-dropdown-menu__bar) {
    height: 27px;
    border-radius: 13px;
    padding: 0 15px 0 5px;
  }

  :global(.tab-select .van-dropdown-menu__title::after) {
    right: -4px;
  }

  :global(.tab-select .van-dropdown-menu .van-dropdown-item--down) {
    top: 145px!important;
}
  .active {
    color: #ff9645 !important;
  }
</style>
